<template>
  <div class="left-card-2">
    <HeaderTitle :imgUrl="`classification-img`" />
    <el-select v-model="select" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value + 'qy-options'" :label="item.label" :value="item.value" />
    </el-select>
    <div class="echarts">
      <div class="echarts-title">{{ titleYear }}年</div>
      <echartVue :series="series" :yAxis="yAxis" :legend="{ show: false }" />
    </div>
  </div>
</template>

<script setup>
import echartVue from '@/components/echarts/dynamicBar/index.vue';
import * as echarts from 'echarts';

const data = ref({
  xYear: [2023, 2024, 2025],
  unit: '千吨',
  yData: [
    {
      石家庄市: 12,
      衡水市: 23,
      张家口市: 14,
      承德市: 43,
      唐山市: 35,
      廊坊市: 12,
      保定市: 32,
      邯郸市: 43,
      邢台市: 23,
      沧州市: 43,
      秦皇岛市: 25
    },
    {
      石家庄市: 34,
      衡水市: 23,
      张家口市: 36,
      承德市: 36,
      唐山市: 25,
      廊坊市: 43,
      保定市: 32,
      邯郸市: 31,
      邢台市: 25,
      沧州市: 15,
      秦皇岛市: 25
    },
    {
      石家庄市: 54,
      衡水市: 34,
      张家口市: 42,
      承德市: 12,
      唐山市: 54,
      廊坊市: 23,
      保定市: 42,
      邯郸市: 43,
      邢台市: 43,
      沧州市: 12,
      秦皇岛市: 23
    }
  ]
});

const currentIndex = ref(0);

const titleYear = ref(data.value.xYear[currentIndex.value]);

const unit = computed(() => data.value.unit);

const timer = ref('');

const yAxis = ref({
  data: Object.keys(data.value.yData[currentIndex.value])
});

const series = ref([
  {
    // realtimeSort: true, //是否自动排序
    name: '全国实时旅游人数',
    type: 'bar',
    data: Object.values(data.value.yData[currentIndex.value]),
    label: {
      show: true,
      position: 'right',
      valueAnimation: true,
      color: '#fff',
      formatter: '{c} ' + unit.value
    },
    barWidth: 10,
    itemStyle: {
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        1,
        0, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
        [
          { offset: 1, color: '#47d2ff' },
          { offset: 0, color: '#0f3352' }
        ]
      )
    }
  }
]);

const select = ref('铁矿');

const options = [
  {
    value: '铁矿',
    label: '铁矿'
  },
  {
    value: '锡矿',
    label: '锡矿'
  }
];

onMounted(() => {
  timer.value = setInterval(function () {
    currentIndex.value++;
    if (currentIndex.value > data.value.yData.length - 1) {
      currentIndex.value = 0;
    }
    titleYear.value = data.value.xYear[currentIndex.value];
    const obj = data.value.yData[currentIndex.value];
    yAxis.value.data = Object.keys(obj);
    series.value[0].data = Object.values(obj);
  }, 3000);
});

onBeforeUnmount(() => {
  clearInterval(timer.value);
});
</script>
